<template>
  <!-- 页面容器 -->
  <div class="content">
    <!-- 个人信息展示容器 -->
    <div class="bg">
      <!-- 头像 -->
      <van-image class="tx" round width="5rem" height="5rem" :src="userFace" />
      <div>
        <span style="color:blueviolet">{{ realname }}</span>
      </div>
      <div style="padding-bottom: 3%">
        <span style="color:blueviolet">可可喜欢家，家喜欢干净</span>
      </div>
    </div>
    <div class="content2">
      <div
        style="
          width: 80%;
          margin-left: 10%;
          text-align: center;
          padding-top: 5%;
          padding-bottom: 2%;
        "
      >
        <van-row type="flex" justify="space-around">
          <van-col span="5">已完成</van-col>
          <van-col span="5">待服务</van-col>
          <van-col span="5">已支付</van-col>
          <van-col span="5">余额</van-col>
        </van-row>
      </div>
      <div
        style="
          width: 80%;
          margin-left: 10%;
          text-align: center;
          padding-bottom: 3%;
        "
      >
        <van-row type="flex" justify="space-around">
          <van-col span="5">11</van-col>
          <van-col span="5">11</van-col>
          <van-col span="5">22</van-col>
          <van-col span="5">{{ balance }}</van-col>
        </van-row>
      </div>

    </div>
    <div class="function">

      <van-cell title="实名认证" is-link to="" @click="toTruename" />

      <van-cell title="提现" is-link to="" @click="tx" />
      <van-dialog v-model="show" title="提现" show-cancel-button @confirm='tixian'>
        <van-field v-model="money" type="digit" label="金额" />
      </van-dialog>

      <van-cell title="收益信息" is-link to="/manager/income" />
      <van-cell title="个人信息" is-link to="/manager/myinfo" />
    </div>

    <div class="bt">
      <van-button
        round
        type="primary"
        size="large"
        color="linear-gradient(#a8c0ff, #00dbde)"
        @click="logout"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
import { Dialog } from "vant";
import { Notify } from "vant";

export default {
  data() {
    return {
      //用户名
      realname: "",
      // 用户头像
      userFace: "",
      // 用户余额
      balance: "",
      show: false,
      id: "",
      money: "",
    };
  },
  methods: {
    toTruename()
    // {this.$router.push('/manager/truename')},
    {
      this.$router.push({
        path:"/manager/truename",
        query:{
          id:this.id
        }
      })
    },
    tx() {
      this.show = true;
      
    },

    async tixian() {
      const txdata = {
        money: this.money,
        userId: this.id,
        applyType: "提现",
      };
      let res = await post("/accountApply/submitAccountApply", txdata);
      console.log(res);
      Notify({ type: "success", message: res.data.message });
    },

    async getuserinfo() {
      let res = await get("/user/info", {
        token: localStorage.getItem("token"),
      });
      console.log(res);
      this.realname = res.data.data.realname;
      this.userFace = res.data.data.userFace;
      this.balance = res.data.data.balance;
      this.id = res.data.data.id;
    },
    logout() {
      Dialog.confirm({
        message: "是否退出登录",
      })
        .then(async () => {
         
          let res = await post("/user/logout");
        
          Notify({ type: "success", message: res.data.message});
          this.$router.push({
            path: "/Login",
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  created() {
    this.getuserinfo();
  },
};
</script>

<style scoped>
/* .content2{
  background-color: aquamarine;
} */
/* .info {
  padding-top: 3%;
  text-align: center;
  padding-bottom: 3%;

} */
.function {
  margin-top: 10%;
  margin-left: 2%;
  width: 96%;
}
.bt {
  margin-top: 20%;
  text-align: center;
  width: 60%;
  margin-left: 20%;
  align-content: flex-end;
  
}
.content {
  height: 100%;
  width: 100%;
  /* background-color:aqua; */
}
.bg {
  height: 40%;
  text-align: center;
  background-image: linear-gradient(#a8c0ff, #00dbde);
}
.tx {
  margin-top: 5%;
}
</style>